<!--
- File:    文章详细页（手机发布的文章）
-->
<template>
  <div>
    <div class="Web_Box" style="padding-bottom: 0.5rem; background-color: white">
      <div class="Encyclopedias_box bg_fff pb20">
        <i class="iconfont icon-jinghua" v-show="articleInfo.type == '1'"></i>
        <div class="encyimg">
          <!--<img src="res1/wap/images/encing3.png">-->
          <h3 class="ency_title">{{articleInfo.title}}
          </h3>
          <div class="author f-cb pl20">
            <span class="au_img" @click="gotoBlog(articleInfo.member_id, '1')"><img :src="articleInfo.member_avatar ? $config.imgsite + $config.avatarSrc + articleInfo.member_avatar + '_w150': defaultAvatar"></span><span class="au_name" style="margin-right: 10px;" @click="gotoBlog(articleInfo.member_id, '1')">{{articleInfo.member_name}}1</span>
            <i v-show="articleInfo.is_up" class="iconfont icon-dianzan article-thumb" @click="thumb('0')"></i>
            <i v-show="!articleInfo.is_up" class="iconfont icon-dianzan" @click="thumb('1')"></i>
            <span>{{articleInfo.up_count}}</span>
            <span style="margin-left: 15px;">阅读：{{articleInfo.read_count}}</span>
            <span class="tie" style="float: right; margin-right: 15px;">{{articleInfo.add_time | timestampToDate('yyyy-MM-dd')}}</span>
          </div>
        </div>
      </div>
      <div class="screen_b">
        <ul class="f-cb">
          <li v-for="tag in articleInfo.d_ids" class="tag-on">{{tag.d_name}}</li>
        </ul>
      </div>
      <div v-for="block in articleInfo.content">
        <div class="boutibox" v-if="block.type == 'text'" style="padding: 0 0.5rem">
          <p class="bouttext">{{block.value}}</p>
        </div>
        <div class="boutibox" v-if="block.type == 'img'" style="padding: 0 0.5rem">
          <img style="margin: 0; width:100%" :src="$config.imgsite + $config.uploadImgSrc + block.value + '_w640'">
        </div>
      </div>
      <div class="ency_bottom2" style="margin-top: 10px; position: relative">
        <ul class="f-cb">
          <li class=" bor-r-eee">
            <a>
              <i v-show="articleInfo.is_up" class="iconfont icon-dianzan article-thumb" @click="thumb('0')"></i>
              <i v-show="!articleInfo.is_up" class="iconfont icon-dianzan" @click="thumb('1')"></i>
              <span>{{articleInfo.up_count}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        articleId: this.$route.params.id,
        defaultAvatar: require('../../../assets/images/avatar.png'),
        articleInfo: {}
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getArticleInfo()
    },
    methods: {
      gotoBlog(memberId, showType) {
        this.$router.push({name: 'blog-index', query: {member: memberId, showType: showType}})
      },
      getArticleInfo() {
        this.$request.getArticleInfo(this.articleId).then(data => {
          this.articleInfo = data
          this.$native.weixinShare(window.location.href, data.title, null, '遇花园')
        }).catch(e => {
          this.$toast('获取文章详情失败' + e.msg)
        })
      },
      thumb(status) {
        this.$request.setArticleThumb(this.articleId, status).then(data => {
          this.articleInfo.is_up = !(status == '0')
          if (status == '0') { // 取消点赞，点赞数减1
            this.articleInfo.up_count = parseInt(this.articleInfo.up_count || 0) - 1
          } else { // 点赞，点赞数加1
            this.articleInfo.up_count = parseInt(this.articleInfo.up_count || 0) + 1
          }
        })
      }
    }
  }
</script>

<style>
  .tag-on {
    background-color: #3dbb6e !important;
    color: #fff !important;
  }

  .article-thumb {
    color: #3dbb6e !important;
  }
</style>